<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考古加数据解码工具 - 网页版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 40px;
            max-width: 800px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }

        .title {
            text-align: center;
            color: #333;
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 700;
            background: linear-gradient(45deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 1.1em;
        }

        .input-group {
            margin-bottom: 25px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 600;
            font-size: 1.1em;
        }

        input, textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1em;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        textarea {
            resize: vertical;
            min-height: 120px;
            font-family: 'Courier New', monospace;
        }

        .button-group {
            display: flex;
            gap: 15px;
            margin: 30px 0;
        }

        button {
            flex: 1;
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
        }

        .btn-secondary {
            background: linear-gradient(45deg, #f093fb, #f5576c);
            color: white;
        }

        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        button:active {
            transform: translateY(-1px);
        }

        .result-area {
            margin-top: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 15px;
            border: 2px solid #e0e0e0;
            min-height: 150px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 400px;
            overflow-y: auto;
            display: none;
        }

        .result-area.show {
            display: block;
            animation: fadeInUp 0.5s ease;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .status {
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
            font-weight: 600;
            display: none;
        }

        .status.success {
            background: linear-gradient(45deg, #4facfe, #00f2fe);
            color: white;
        }

        .status.error {
            background: linear-gradient(45deg, #ff6b6b, #ffa500);
            color: white;
        }

        .instructions {
            background: rgba(102, 126, 234, 0.1);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 30px;
            border-left: 4px solid #667eea;
        }

        .instructions h3 {
            color: #667eea;
            margin-bottom: 10px;
        }

        .instructions ol {
            margin-left: 20px;
            line-height: 1.6;
            color: #555;
        }

        .floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            animation: float 6s infinite linear;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="floating-particles"></div>
    
    <div class="container">
        <h1 class="title">🔓 考古加解码工具</h1>
        <p class="subtitle">网页版 - 简单易用的数据解码助手</p>

        <div class="instructions">
            <h3>📋 使用说明</h3>
            <ol>
                <li>在浏览器中访问考古加用户页面</li>
                <li>打开开发者工具 (F12) → Network 标签</li>
                <li>刷新页面，找到 API 请求</li>
                <li>复制响应中的 data 字段内容到下方</li>
                <li>点击解码按钮获得结果</li>
            </ol>
        </div>

        <div class="input-group">
            <label for="apiPath">API路径:</label>
            <input type="text" id="apiPath" placeholder="/api/author/detail/9Q6Wd6vj" value="/api/author/detail/9Q6Wd6vj">
        </div>

        <div class="input-group">
            <label for="encryptedData">加密数据:</label>
            <textarea id="encryptedData" placeholder="请粘贴从API响应中获取的加密data字段..."></textarea>
        </div>

        <div class="button-group">
            <button class="btn-primary" onclick="decodeData()">🔓 解码数据</button>
            <button class="btn-secondary" onclick="clearAll()">🗑️ 清空内容</button>
        </div>

        <div class="status" id="status"></div>
        <div class="result-area" id="resultArea"></div>
    </div>

    <script>
        // 创建浮动粒子效果
        function createParticles() {
            const container = document.querySelector('.floating-particles');
            const particleCount = 50;

            for (let i = 0; i < particleCount; i++) {
                setTimeout(() => {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    
                    const size = Math.random() * 4 + 2;
                    particle.style.width = size + 'px';
                    particle.style.height = size + 'px';
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
                    particle.style.animationDelay = Math.random() * 2 + 's';
                    
                    container.appendChild(particle);
                    
                    setTimeout(() => {
                        if (particle.parentNode) {
                            particle.parentNode.removeChild(particle);
                        }
                    }, 8000);
                }, i * 100);
            }
        }

        // 定期创建粒子
        setInterval(createParticles, 2000);
        createParticles();

        // Base64编码函数
        function encode(text) {
            return btoa(unescape(encodeURIComponent(text)));
        }

        // 显示状态消息
        function showStatus(message, isError = false) {
            const status = document.getElementById('status');
            status.textContent = message;
            status.className = `status ${isError ? 'error' : 'success'}`;
            status.style.display = 'block';
            
            setTimeout(() => {
                status.style.display = 'none';
            }, 3000);
        }

        // 显示结果
        function showResult(result) {
            const resultArea = document.getElementById('resultArea');
            resultArea.textContent = result;
            resultArea.classList.add('show');
        }

        // 清空所有内容
        function clearAll() {
            document.getElementById('encryptedData').value = '';
            document.getElementById('resultArea').classList.remove('show');
            document.getElementById('status').style.display = 'none';
        }

        // 格式化JSON
        function formatJson(jsonString) {
            try {
                const obj = JSON.parse(jsonString);
                return JSON.stringify(obj, null, 2);
            } catch (e) {
                return jsonString;
            }
        }

        // 解码数据
        async function decodeData() {
            const apiPath = document.getElementById('apiPath').value.trim();
            const encryptedData = document.getElementById('encryptedData').value.trim();

            if (!apiPath || !encryptedData) {
                showStatus('❌ 请填写API路径和加密数据', true);
                return;
            }

            try {
                showStatus('🔄 正在解码中...');

                // 1. 生成密钥字符串：将API路径编码后重复3次
                const encodedPath = encode(apiPath);
                const keyString = encodedPath + encodedPath + encodedPath;

                // 2. 提取密钥和IV
                const orgKey = keyString.substring(0, 16);   // 前16位作为密钥
                const orgIv = keyString.substring(12, 28);   // 12-28位作为IV

                console.log('API路径:', apiPath);
                console.log('编码后路径:', encodedPath);
                console.log('AES密钥:', orgKey);
                console.log('AES IV:', orgIv);

                // 3. 导入密钥
                const keyData = new TextEncoder().encode(orgKey);
                const key = await crypto.subtle.importKey(
                    'raw',
                    keyData,
                    { name: 'AES-CBC' },
                    false,
                    ['decrypt']
                );

                // 4. Base64解码加密数据
                const encryptedBytes = Uint8Array.from(atob(encryptedData), c => c.charCodeAt(0));

                // 5. 准备IV
                const iv = new TextEncoder().encode(orgIv);

                // 6. 执行AES解密
                const decryptedBuffer = await crypto.subtle.decrypt(
                    {
                        name: 'AES-CBC',
                        iv: iv
                    },
                    key,
                    encryptedBytes
                );

                // 7. 转换为字符串
                const decryptedText = new TextDecoder().decode(decryptedBuffer);
                const formattedResult = formatJson(decryptedText);

                showStatus('🎉 解码成功!');
                showResult(formattedResult);

            } catch (error) {
                console.error('解码失败:', error);
                showStatus('❌ 解码失败: ' + error.message, true);
            }
        }

        // 添加回车键快捷解码
        document.getElementById('encryptedData').addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'Enter') {
                decodeData();
            }
        });

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加一些交互提示
            const textarea = document.getElementById('encryptedData');
            textarea.addEventListener('focus', function() {
                if (!this.value) {
                    showStatus('💡 提示: 可以使用 Ctrl+Enter 快速解码');
                }
            });
        });
    </script>
</body>
</html>